<template>
  <div class="home1">
    <div class="flow-panel" v-if="dealList.length" style="position: relative">
      <!--<div
        v-for="(item, index) in dealList"
        :key="index"
        style="
          position: absolute;
          left: 5%;
          width: 90%;
          height: 30px;
          background: pink;
        "
        :style="{
          top: `${index * 300}px`,
        }"
      ></div>-->
      <div
        v-for="(item, index) in dealList"
        :key="index"
        :class="(index + 1) % 2 === 1 ? 'list-li' : 'reverse-li'"
      >
        <!-- row-first-node 每行第一个的线要处理 -->
        <div
          v-for="(node, idx) in item"
          :key="idx"
          class="node"
          :class="{
            'row-first-node': idx === 0,
          }"
        >
          <!--标题-->
          <div
            :class="[
              index % 2 === 1 ? 'fan_zhuan' : '',
              item[idx - 1 === -1 ? 0 : idx - 1].groupName === node.groupName &&
              idx !== 0
                ? 'none__'
                : 'block__',
            ]"
            class="title_"
            :style="{
              background: node.color,
              width:
                item[idx - 1 === -1 ? 0 : idx - 1].groupName ===
                  node.groupName && idx !== 0
                  ? '90%'
                  : '90%',
            }"
          >
            <div :class="['l_box']"></div>
            <div
              :class="['r_box']"
              :style="{ borderLeft: `12px ${node.color} solid` }"
            ></div>
            <span>{{ node.groupName }}{{ "" }}</span>
          </div>
          <!-- 线 -->
          <div class="line"></div>
          <!-- 向下转折线--矩形 每行的第一个，除了首行 -->
          <div v-if="index !== 0 && idx === 0" class="rectangle-line"></div>
          <!-- 节点 -->
          <div class="node-item" :style="{ background: node.bgColor }">
            <!--连接圆点-->
            <i
              v-if="node.first"
              class="el-icon-video-play point_icon"
              style="background: #1890ff; color: #fff"
            ></i>
            <i
              v-if="node.theLast"
              class="el-icon-switch-button point_icon"
              style="background: #1890ff; color: #fff"
            ></i>
            <i v-if="!node.first && !node.theLast" class="point"></i>
            <!-- <span>{{ node.groupName }}</span>-->
            <h4 :style="{ color: node.color }">{{ node.operateTypeName }}</h4>
            <p class="text">操作人：{{ node.operatorName }}</p>
            <p class="text">操作科室：{{ node.operateDeprName }}</p>
            <p class="time" style="font-size: 14px">
              {{ node.operateDateTime || "---" }}
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { bhData } from "@/data";

export default {
  name: "Home1",
  data() {
    return {
      bhData: bhData,
      dealList: [],
      maxLen: 6,
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      this.dealList = [];
      const { mzcfbh, zykfbh, zyzjbh } = this.bhData[0];
      let list = mzcfbh;
      // console.log(list);
      Object.assign(list[0], { first: true });
      Object.assign(list[list.length - 1], { theLast: true });
      this.dataProcessing(list);
      for (let i = 0; i < list.length; i += this.maxLen) {
        this.dealList.push(list.slice(i, i + this.maxLen));
      }
    },
    // 数据处理
    dataProcessing(list) {
      let listNames = list.map((item) => item.groupName);
      let listName = Array.from(new Set(list.map((item) => item.groupName)));
      // console.log(listName);
      listName.forEach((item, index) => {
        list.forEach((node) => {
          if (item === node.groupName) {
            switch (index) {
              case 0:
                Object.assign(node, {
                  color: "#5A6FE8",
                  bgColor: "#e6eafd",
                });
                break;
              case 1:
                Object.assign(node, {
                  color: "#66D7B3",
                  bgColor: "#edfcf7",
                });
                break;
              case 2:
                Object.assign(node, { color: "#479AFF", bgColor: "#edf4ff" });
                break;
              case 3:
                Object.assign(node, { color: "#FF9459", bgColor: "#fff8ee" });
                break;
              // 继续添加其他的情况
              default:
                // 如果index不是0、1、2、3，则不执行任何操作
                break;
            }
          }
        });
      });
      /*  if (this.oneLength > this.maxLen) {
        this.brOneL = this.oneLength - this.maxLen;
        this.oneLength = this.maxLen;
      }*/

      // console.log(list);
    },
    countOccurrences(array, data) {
      return array.filter((item) => item === data).length;
    },
  },
  computed: {},
};
</script>
<style lang="scss" scoped>
$height: 300px; //节点的高
.flow-panel {
  padding: 80px 5% 0 5%;
  width: 1500px;
  height: auto;
  margin: 0 auto;

  .title_ {
    color: #ffffff;
    position: absolute;
    z-index: 20;
    left: 24px;
    top: -50px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
  }
  .fan_zhuan {
    transform: rotate(180deg);
    span {
      transform: rotate(180deg);
    }
  }
  .none__ {
    display: none;
  }
  //  连接线 用absolute top0
  .line {
    height: 3px;
    background: #3d7eff;
    position: absolute;
    z-index: 11;
    width: 100%;
    top: 20px;
  }

  //  左右往下画的连线 用的矩形，三边 用absolute top0
  .rectangle-line {
    position: absolute;
    z-index: 11;
    width: 50%;
    border-color: #3d7eff;
    border-style: solid;
    border-width: 0;
    border-top-width: 3px;
    border-bottom-width: 3px;
    bottom: calc(100% - 25px);
    height: calc($height);
  }

  //点的样式
  .point {
    width: 14px;
    height: 14px;
    z-index: 100;
    border-radius: 50%;
    background: #1e9fff;
    border: 5px solid #c6e2ff;
    display: block;
    margin: 0 auto 10px auto;
  }

  .point_icon {
    font-size: 24px;
    width: 24px;
    height: 24px;
    z-index: 100;
    border-radius: 50%;
    display: block;
    margin: 0 auto 10px auto;
  }

  //节点样式
  .node {
    flex: 1;
    text-align: center;
    position: relative;
    height: $height;
    max-width: 270px;

    .node-item {
      position: absolute;
      top: -7px; //点需要向上偏移7px才在线上
      text-align: center;
      z-index: 10;
      padding: 20px 20px;
      width: 240px;
      //max-width: 230px;

      p.text {
        font-size: 16px;
        color: #303133;
      }
    }
  }

  //正向排列
  .list-li {
    display: flex;
    justify-content: start;
    position: relative;

    //左侧转折线 左对齐
    .rectangle-line {
      left: 0;
      border-left-width: 2px;
    }

    //排列，线方向从左到右
    .line {
      left: -50%;
    }

    //正向 第一个节点 不要线（因为到它的点是用的 rectangle-line 折线）
    .row-first-node .line {
      width: 0;
    }
  }

  //反向排列
  .reverse-li {
    display: flex;
    flex-direction: row-reverse;
    justify-content: end;
    position: relative;
    //右侧转折线 右对齐
    .rectangle-line {
      right: 0;
      border-right-width: 2px;
    }

    //反向排列，线方向从右到左
    .line {
      right: -50%;
    }

    //反向 第一个节点 不要线（因为到它的点是用的 rectangle-line 折线）
    .row-first-node .line {
      width: 0;
    }
  }
}
.l_box {
  position: absolute;
  top: 0;
  display: inline-block;
  border-left: 12px #ffffff solid;
  border-top: 16px transparent solid;
  border-bottom: 16px transparent solid;
  left: 0;
  z-index: 99;
}

.r_box {
  position: absolute;
  top: 0;
  display: inline-block;
  border-top: 16px transparent solid;
  border-bottom: 16px transparent solid;
  right: -12px;
  z-index: 99;
}
</style>